<script setup lang="ts">
import ZCandle from '../../components/z-candle/index.vue'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { USER_LIST } from '@/auth/auth.config';
import { AclRole } from '@/auth/auth.enum';
import { getSession, saveSession } from '@/auth/auth.service';

const router = useRouter()

// form表单
const form = reactive({
    userName: '',
    userPass: ''
})
const formRules = reactive({
    userName: [{required: true, message: '阎王让你三更死', trigger: 'blur'}],
    userPass: [{required: true, message: '谁敢留人到五更', trigger: 'blur'}]
})
// 登录
const formRef = ref()
const onSubmit = () => {
    if(!formRef.value) return
    formRef.value.validate((valid: any) => {
        if(valid) {
            const roleUser = USER_LIST.filter(item => item.username === form.userName)[0];
            // 有这个用户并且密码正确
            if(roleUser && form.userPass === roleUser.userpass) {
                const token = '==ABCD_1234=='
                ElMessage({type: 'success', message: '登录成功'})
                saveSession({token: token, userinfo: JSON.stringify(roleUser)})
                setTimeout(() => {
                  router.replace('/layout/home')    
                }, 500);
            }else{
                ElMessage({type: 'error', message: '用户名或密码有误！！！'})
            }
        }else{
            return false
        }
    })
}

// 自动登录检测
onMounted(() => {
    const { token, userinfo } = getSession(['token', 'userinfo'])
    if(token && userinfo){
        ElMessage({type: 'success', message: '检测自动登录中...', duration: 800})
        router.replace('/layout/home')
    }
})

// 密码框获取焦点
const isFire = ref(false)
const onFocus = () => { isFire.value = true }
const onBlur = () => { isFire.value = false }
</script>

<template>
  <div class="login">
    <img src="/src/assets/door.png" alt="" class="logo-bg">
    <div class="login-form">
      <div class="login-form-box">
        <el-form ref="formRef" :model="form" :rules="formRules">
          <el-form-item prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户名" :prefix-icon="User" size="large"></el-input>
          </el-form-item>
          <el-form-item prop="userPass">
            <el-input v-model="form.userPass" placeholder="请输入密码" :prefix-icon="Lock" show-password size="large" @focus="onFocus" @blur="onBlur"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" type="primary" @click="onSubmit" size="large">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="login-candle candle-1">
      <!-- :fire-color="isFire || form.userPass ? '#06be0c' : '#fc7302'" -->
      <z-candle></z-candle>
    </div>
    <div class="login-candle candle-2">
      <z-candle></z-candle>
    </div>
  </div>
</template>

<style scoped lang="scss">
    .login {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: relative;
        min-width: 1400px;

        .logo-bg {
            height: 100%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            user-select: none;
            pointer-events: none;
            z-index: 2;
        }

        .login-form{
            width: 625px;
            overflow: hidden;
            position: absolute;
            z-index: 1;
            bottom: 135px;
            left: 50%;
            transform: translateX(-51%);
            .login-form-box{ width: 100%; height: 100%; padding: 60px 100px; }
            .login-btn{ width: 100%; }
            .el-form-item { margin-bottom: 30px; }
        }

        .login-candle {
            position: absolute;
            z-index: 2;
            bottom: 0;
            &.candle-1 { left: 10%; }
            &.candle-2 { right: 10%; }
        }
    }
</style>